<template>
    <div
        class="result"
        style="-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"
    >
        <div id="header">
            <span class="am-icon-mortar-board" id="topPart">{{projectName}}—{{categoryName}}</span>
        </div>
        <div id="main">
            <div class="rs_title">
                <!-- <img style="position:absolute;right:300px;top:60px;" class="boom" src="../../static/images/pass.png" alt=""> -->
                <img
                    style="position:absolute;right:189px;top:60px;"
                    class="boom"
                    src="../../static/images/fail.png"
                    alt=""
                    v-if='!passed&&isRequestEnd'
                >
                <img
                    style="position:absolute;right:300px;top:60px;"
                    class="boom"
                    src="../../static/images/pass.png"
                    alt=""
                    v-if='passed&&isRequestEnd'
                >
                <h1>{{examName}}</h1>
                <p class="rs_info">
                    <small>
                        <span class="am-icon-map-marker"></span>科目：{{projectName}}—{{categoryName}}
                    </small>
                    <small>
                        <span class="am-icon-bell-o"></span>时间：{{examTime}} 分钟
                    </small>
                </p>
                <div class="rs_result">
                    <table class="am-table am-text-sm am-table-striped am-animation-slide-top">
                        <thead>
                            <tr>
                                <th>题型</th>
                                <th>正确</th>
                                <th>错误</th>
                                <th>未做</th>
                                <th>分值/题</th>
                                <th>得分</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>单选题</td>
                                <td>{{results[0].correctCount}}/{{results[0].totalCount}}</td>
                                <td>{{results[0].errorCount}}/{{results[0].totalCount}}</td>
                                <td>{{results[0].ignoreCount}}/{{results[0].totalCount}}</td>
                                <td>{{results[0].normalScore}}</td>
                                <td>{{results[0].totalScore}}</td>
                            </tr>
                            <tr>
                                <td>多选题</td>
                                <td>{{results[1].correctCount}}/{{results[1].totalCount}}</td>
                                <td>{{results[1].errorCount}}/{{results[1].totalCount}}</td>
                                <td>{{results[1].ignoreCount}}/{{results[1].totalCount}}</td>
                                <td>{{results[1].normalScore}}</td>
                                <td>{{results[1].totalScore}}</td>
                            </tr>
                            <template  v-for="type in typeList">
                              <tr v-if="type>1">
                                <td>{{qusTypeToName(type+'')}}题</td>
                                <td
                                    colspan="5"
                                    class="am-text-center"
                                    style="color:#999"
                                >主观题题型不进行判分，请自行查看题目解析。</td>
                              </tr>
                            </template>
                           
                            <tr>
                                <td class="am-text-center am-text-lg" colspan="7">
                                    <h2>成绩：{{score}} 分</h2>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="rs_detail">
                <div class="rs_detail_main" style="position:relative;">
                    <p
                        id="0"
                        class="rs_t_remark"
                        tktype="1"
                    >一、单项选择题（每小题2分。每小题只有一个正确答案，请从每小题的备选答案中选出一个你认为正确的答案，用鼠标点击相应的选项。）</p>
                    <template v-for="(qus,idx) in questionList.radio">
                        <div class="am-padding-left-lg">
                            <div>
                                <span style="position:absolute;left:26px;">{{qus.num}}.</span>
                                <div class="rs_ex_title" style="display:flex;justify-content:space-between;width:100%;">
                                  <div class="rs_ex_material" v-html="qus.title" style="display:inline-block;float:left;"></div>
                                  <div style="cursor:pointer;display:inline-block;float:right;width:100px;padding-left:30px;flex-shrink:0;justify-content:flex-end;"  @click="handleCollect(qus)">
                                    <img v-show="!qus.isCollection" style="width:20px;height:20px;margin-right:4px;margin-top:-4px;" src="../../static/images/shoucang.png" alt="" srcset="">
                                    <img v-show="qus.isCollection" style="width:20px;height:20px;margin-right:4px;margin-top:-4px;" src="../../static/images/shoucang_active.png" alt="" srcset="">
                                      <span>收藏</span>
                                  </div>
                                </div>
                            </div>
                            <p class="rs_ex_opt"></p>
                            <ul>
                                <li v-for="option in qus.options" style="display:flex;">
                                    <span>{{option.optionName}}.</span>
                                    <div v-html="option.content" style="display:inline-block"></div>
                                </li>
                            </ul>
                            <p></p>
                            <div class="rs_ex_answer" :class="{'am-text-warning':!qus.userAnswer||qus.userAnswer.length<=0,'am-text-primary':qus.userAnswer==qus.rightAnswer,'am-text-danger':qus.userAnswer!=qus.rightAnswer}">您的答案：<span v-if="!qus.userAnswer||qus.userAnswer.length<=0">未做答</span> <span v-for="answer in qus.userAnswer">{{answer}}</span></div>
                            <div class="rs_ex_answer">正确答案：{{qus.rightAnswer}}</div>
                            <blockquote class="rs_ex_parse">
                                <div v-html="qus.analysis"></div>
                            </blockquote>
                            <hr>
                        </div>
                    </template>
                    <!-- 多选题 -->
                    <p
                        class="rs_t_remark"
                        id="1"
                    >二、多项选择题（每小题2分。每小题均有多个正确答案，请从每小题的备选答案中选出你认为正确的答案，用鼠标点击相应的选项。每小题所有答案选择正确的得分，不答、错答、漏答均不得分。）</p>
                    <template v-for="(qus,idx) in questionList.multiples">
                        <div class="am-padding-left-lg">
                            <div class="" style="display:flex;">
                              {{qus.num}}.
                              <div class="rs_ex_title" style="display:flex;justify-content:space-between;width:100%;">
                                <div class="rs_ex_material" v-html="qus.title" style="display:inline-block;float:left;"></div>
                                <div style="cursor:pointer;display:inline-block;float:right;width:100px;padding-left:30px;flex-shrink:0;justify-content:flex-end;"  @click="handleCollect(qus)">
                                  <img v-show="!qus.isCollection" style="width:20px;height:20px;margin-right:4px;margin-top:-4px;" src="../../static/images/shoucang.png" alt="" srcset="">
                                  <img v-show="qus.isCollection" style="width:20px;height:20px;margin-right:4px;margin-top:-4px;" src="../../static/images/shoucang_active.png" alt="" srcset="">
                                    <span>收藏</span>
                                </div>
                              </div>
                            </div>
                            <p class="rs_ex_opt"></p>
                            <ul>
                                <li v-for="option in qus.options" style="display:flex;">
                                    {{option.optionName}}.
                                     <div v-html="option.content" style="display:inline-block"></div>
                                </li>
                            </ul>
                            <p></p>
                           <div class="rs_ex_answer" :class="{'am-text-warning':qus.result==2,'am-text-primary':qus.result==1,'am-text-danger':qus.result==0}">您的答案：<span v-if="!qus.userAnswer||qus.userAnswer.length<=0">未做答</span> <span v-for="answer in qus.userAnswer">{{answer}}</span></div>
                            <div class="rs_ex_answer">正确答案：{{qus.rightAnswer}}</div>
                            <blockquote class="rs_ex_parse">
                                <div v-html="qus.analysis"></div>
                            </blockquote>
                            <hr>
                        </div>
                    </template>
                    <!-- 大题型（简答、案例分析） -->
                    <template v-for="(type,idx) in typeList" v-if="idx>1">
                      <p
                        class="rs_t_remark"
                        :id="idx"
                      >{{numToHanzi(idx)}}、{{qusTypeToName(type+'')}}（每题10分，其中一道小题可以选用中文或英文解答，请仔细阅读答题要求。如使用英文解答，须全部使用英文，答题正确的，增加5分。涉及计算的，要求列出计算步骤。）</p>
                      <div class="am-padding-left-lg">
                          <template v-for="(qus,idx) in questionList[qusTypeToValue(type+'')]">
                              <!-- 题目和收藏 -->
                              <div style="display:flex;">
                                {{idx+1}}、<div class="rs_ex_material" v-html="qus.title" style="display:inline-block;float:left;"></div>
                                <div style="cursor:pointer;display:inline-block;float:right;width:100px;padding-left:30px;flex-shrink:0;justify-content:flex-end;"  @click="handleCollect(qus)">
                                  <img v-show="!qus.isCollection" style="width:20px;height:20px;margin-right:4px;margin-top:-4px;" src="../../static/images/shoucang.png" alt="" srcset="">
                                  <img v-show="qus.isCollection" style="width:20px;height:20px;margin-right:4px;margin-top:-4px;" src="../../static/images/shoucang_active.png" alt="" srcset="">
                                    <span>收藏</span>
                                </div>
                              </div>
                              <template v-for="(subqus,idx) in qus.children">
                                  <p class="rs_ex_title">
                                      <span class="am-badge am-badge-secondary" style="float:left;margin-top:5px;">要求{{idx+1}}</span>
                                      <span v-html="clearContent(subqus.title)"></span>
                                  </p>
                                  <p class="rs_ex_parse"></p>
                                  <div class="rs_ex_answer am-text-primary myAnswer">您的答案：<span v-if="!subqus.userAnswer||subqus.userAnswer.length<=0">未做答</span> <span v-else><div v-html="subqus.userAnswer"></div></span></div>
                                  <blockquote class="am-padding-left-xs">名师解析：
                                      <!-- 解析 -->
                                      <div v-html="subqus.analysis"></div>
                                  </blockquote>
                                  <p></p>
                                  <hr>
                              </template>
                          </template>
                      </div>
                    </template>
                    
                </div>
            </div>
        </div>
        <!--视频讲解-->
        <div id="video-outer" class="video-outer" style="display: none;">
            <div class="video-body">
                <div id="player" style="width: 100%;height: 100%;"></div>
            </div>
        </div>
        <Footer></Footer>
        <div
            class="peter-nav-wrap"
            tabindex="1"
            style="display: block; position: fixed; bottom: 41px; background-color: rgb(255, 255, 255); max-height: 813px; overflow: hidden; width: 100px; left: 1561.5px; outline: none;"
        >
          <div  v-for="(type,idx) in typeList"
                class="peter-nav-item"
                v-anchor="{type:idx}"
                style="display: block; padding: 20px 5px; font-size: 12px; cursor: pointer; border: 1px solid rgb(224, 227, 233); text-align: center; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"
            >{{qusTypeToName(type+'')}}</div>
           
            <div
                v-anchor="{type:'topPart'}"
                class="peter-nav-item"
                style="display: block; padding: 20px 5px; font-size: 12px; cursor: pointer; border: 1px solid rgb(224, 227, 233); text-align: center; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"
            >回到顶层</div>
        </div>
        <div
            class="nicescroll-rails nicescroll-rails-vr"
            style="width: 12px; z-index: auto; cursor: default; position: fixed; top: 593px; left: 1649.5px; height: 305px; opacity: 0.5; display: none;"
        >
            <div
                class="nicescroll-cursors"
                style="position: relative; top: 0px; float: right; width: 10px; height: 0px; background-color: rgb(14, 144, 210); border: 1px solid rgb(255, 255, 255); background-clip: padding-box; border-radius: 5px;"
            ></div>
        </div>
        <div
            class="nicescroll-rails nicescroll-rails-hr"
            style="height: 12px; z-index: auto; top: 886px; left: 1561.5px; position: fixed; opacity: 0.5; cursor: default; display: none;"
        >
            <div
                class="nicescroll-cursors"
                style="position: absolute; top: 0px; height: 10px; width: 0px; background-color: rgb(14, 144, 210); border: 1px solid rgb(255, 255, 255); background-clip: padding-box; border-radius: 5px;"
            ></div>
        </div>
    </div>
</template>
<script>
import Footer from "@/components/common/footer"
export default {
  name: "result",
  components:{
      Footer
  },
  data() {
    return {
        examTime:'',//时长
        categoryName:'会计',
        projectName:'注册会计师',
       examName:'模拟考试',
      passed:'',//是否通过
      questionList: [], //试题列表
      results: {
        0: {
          correctCount: 0,
          errorCount: 0,
          ignoreCount: 0,
          totalCount: 0
        },
        1: {
          correctCount: 0,
          errorCount: 0,
          ignoreCount: 0,
          totalCount: 0
        }
      }, //试题结果
      myquestionList: {
        //试题结果列表
        0: [],
        1: [],
        2: [],
        3: []
      }, //试题
      score: 0,
      isRequestEnd: false,
      typeList:[],
    };
  },
  created() {
    if(localStorage.getItem('categoryName')){
        this.categoryName = localStorage.getItem('categoryName')
    }
    if(localStorage.getItem('projectName')){
        this.projectName = localStorage.getItem('projectName')
    }
    this.getRusltInfo();
    this.getQuestionsList();
  },
  methods: {
      clearContent(content){//清除空标签
      var reg = /<[^>]*>[\s]*<\/[^>]*>/g;
      return content.replace(reg,"");
      str = str.replace(this.reg,"")
      if(this.reg.test(str)){        
        clearContent(str)
      }else{
         return str  
      }
    },
     handleCollect(qus){//收藏
      this.$post(`/api/v1/question/${qus.questionId}/collection`)
      .then(res=>{
          if(res.code == 200){
            this.$message({
                message: res.data,
                type: 'success'
            });
            qus.isCollection=!qus.isCollection;
            
          }else{
            this.$message.error(res.msg);
            
          }
      })
 
     },
     qusTypeToName(type){//题型转为类型
      switch(type){
        case '0':
          return '单项选择题';break;
        case '1':
          return '多项选择题';break;
        case '4':
          return '简答题';break;
        case '5':
          return '计算分析题';break;
        case '6':
          return '综合题';break;
        case '7':
          return '计算问答题';break;
        case '8':
          return '案例分析题';break; 
      }
    },
    qusTypeToValue(type){//题型转为英文
      switch(type){
        case '0':
          return '单选';break;
        case '1':
          return '多选';break;
        case '4':
          return 'showAnswers';break;
        case '5':
          return 'calculations';break;
        case '6':
          return 'comprehensives';break;
        case '7':
          return 'calculationAnswers';break;
        case '8':
          return 'caseStudies';break; 
      }
    },
    numToHanzi(num){//数字转汉字
      switch(num){
        case 0:
          return '一';break;
        case 1:
          return '二';break;
        case 2:
          return '三';break;
        case 3:
          return '四';break;
      }
    },
    // 获取题详情
    getQuestionsList() {
      let paperID = this.$route.query.paperID;
      this.$get("/api/v1/exams/" + paperID).then(res => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        } else {
          let typeList = [0,1]
          let questionList = [];
          res.data.radio.forEach((qus, idx) => {
            qus.num = idx + 1;
            qus.options = qus.options.sort((a, b) => {//排序
              if (a["optionName"] > b["optionName"]) return 1;
              else return -1;
            });
          });
          res.data.multiples.forEach((qus, idx) => {
            qus.num = idx + 1;
            qus.options = qus.options.sort((a, b) => {
              if (a["optionName"] > b["optionName"]) return 1;
              else return -1;
            });
          });
          if(res.data.calculations.length>0){
            typeList.push(5);
            res.data.calculations.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
          }
          if(res.data.comprehensives.length>0){
            res.data.comprehensives.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
            typeList.push(6);
          }
          
          if(res.data.calculationAnswers.length>0){
            res.data.calculationAnswers.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
            typeList.push(7);
          }
          if(res.data.showAnswers.length>0){
            res.data.showAnswers.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
            typeList.push(4);
          }
          
          if(res.data.caseStudies.length>0){
            res.data.caseStudies.forEach((qus, idx) => {
              qus.num = idx + 1;
            });
            typeList.push(8);
          }
          this.typeList = typeList
          console.log(typeList)
 
          this.questionList = res.data;
          this.examName = res.data.name;
          this.questionList.radio.forEach(qus=>{
              qus.options.forEach(option=>{
                  if(option.isCorrect){
                      if(qus.rightAnswer){
                        qus.rightAnswer+= option.optionName
                      }else{
                        qus.rightAnswer= option.optionName
                      }
                       
                  }
              })
          })
           this.questionList.multiples.forEach(qus=>{
              qus.options.forEach(option=>{
                  if(option.isCorrect){
                      if(qus.rightAnswer){
                        qus.rightAnswer+= option.optionName
                      }else{
                          qus.rightAnswer= option.optionName
                      }
                  }
              })
          })
          if (this.isRequestEnd) {
            //两个请求都结束了
            this.questionList.radio.forEach(qus => {
                for(let myqus in this.myquestionList){
                    if(myqus==qus.questionId){
                        qus.userAnswer = this.myquestionList[myqus].answer
                        qus.result =  this.myquestionList[myqus].result
                    }
                }
            });
            this.questionList.multiples.forEach(qus => {
                for(let myqus in this.myquestionList){
                    if(myqus==qus.questionId){
                      this.myquestionList[myqus].answer.sort();
                        qus.userAnswer = this.myquestionList[myqus].answer
                        qus.result =  this.myquestionList[myqus].result
                    }
                }
            });
            this.questionList.comprehensives.forEach(qus => {
                qus.children.forEach(child=>{
                    for(let myqus in this.myquestionList){
                        if(myqus==child.questionId){
                            child.userAnswer = this.myquestionList[myqus].answer[0]
                            console.log(this.myquestionList[myqus].answer)
                        }
                    }
                })
                
            });
            this.questionList.calculations.forEach(qus => {
                qus.children.forEach(child=>{
                    for(let myqus in this.myquestionList){
                        if(myqus==child.questionId){
                            child.userAnswer = this.myquestionList[myqus].answer[0]
                            console.log(this.myquestionList[myqus].answer)
                        }
                    }
                })
            });

            this.questionList.caseStudies.forEach(qus => {
                qus.children.forEach(child=>{
                    for(let myqus in this.myquestionList){
                        if(myqus==child.questionId){
                            child.userAnswer = this.myquestionList[myqus].answer[0]
                            console.log(this.myquestionList[myqus].answer)
                        }
                    }
                })
            });
            this.questionList.calculationAnswers.forEach(qus => {
                qus.children.forEach(child=>{
                    for(let myqus in this.myquestionList){
                        if(myqus==child.questionId){
                            child.userAnswer = this.myquestionList[myqus].answer[0]
                            console.log(this.myquestionList[myqus].answer)
                        }
                    }
                })
            });
            this.questionList.showAnswers.forEach(qus => {
                qus.children.forEach(child=>{
                    for(let myqus in this.myquestionList){
                        if(myqus==child.questionId){
                            child.userAnswer = this.myquestionList[myqus].answer[0]
                            console.log(this.myquestionList[myqus].answer)
                        }
                    }
                })
            });
          } else {
            this.isRequestEnd = true;
          }
        }
      });
    },
    // 获取试卷分析
    getRusltInfo() {
      let paperRecordId = this.$route.query.paperRecordId;
      this.$get(`/api/v1/paper_records/${paperRecordId}/result`).then(res => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        } else {
          this.myquestionList = res.data.questionResultTypes;
          let results = res.data.results;

          if (results[0] != undefined && results[0].correctCount != undefined) {
            results[0].totalCount =
              results[0].correctCount +
              results[0].errorCount +
              results[0].ignoreCount;
            this.results[0] = results[0];
          }
          if (results[1] != undefined && results[1].correctCount != undefined) {
            results[1].totalCount =
              results[1].correctCount +
              results[1].errorCount +
              results[1].ignoreCount;
            this.results[1] = results[1];
          }
         this.examTime = res.data.time;
          this.score = res.data.score;
          this.passed = res.data.passed; 
          if (this.isRequestEnd) {
            //两个请求都结束了
          } else {
            this.isRequestEnd = true;
          }
        }
      });
    }
  },
  directives: {
    anchor: {
      bind(el, binding) {
        el.onclick = function() {
          $(document.documentElement).animate(
            { scrollTop: $("#" + binding.value.type).offset().top },
            300
          );
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/*考试结果页面*/
.result {
  background: #fff;
  .myAnswer{
    width: 100%;
    max-width: 1000px;
    /* overflow: auto; */
    overflow: hidden;
  }
}
#header {
  height: 50px;
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  align-items: center;
  background: #0e90d2;
  color: #fff;
}

#main {
  width: 1200px;
  margin: 0 auto;
}

#footer {
  height: 40px;
  line-height: 40px;
  color: #999;
}
// 不合格图标
.boom {
  animation: boom 0.5s;
}
@keyframes boom {
  from {
    width: 300px;
  }
  to {
    width: 128px;
  }
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

#main .rs_title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #e0e3e9;
  background: #fff;
  border-radius: 3px;
  margin-top: 35px;
  position: relative;
}
#pass {
  position: absolute;
  font-size: 20rem;
  right: 6rem;
  top: 0rem;
  z-index: 999;
}
#main .rs_title h1 {
  font-size: 3.8rem;
  display: flex;
  align-items: flex-end;
  letter-spacing: 2px;
  text-align: center;
}
#main .rs_title .rs_info {
  display: flex;
  flex-direction: row;
}

#main .rs_title .rs_result {
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#main .rs_title .rs_result > div {
  // flex: 1;
}

#main .rs_detail {
  padding: 50px;
  background: #fff;
  border: 1px solid #e0e3e9;
  border-radius: 3px;
  margin-top: 5px;
}

#main .rs_detail .rs_detail_main {
  /*font-size: 1.3rem;*/
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

#main .rs_detail .rs_t_remark {
  font-weight: bold;
  color: #333;
}
</style>
